<template>
  <div id="app">

    <!-- <router-view/> -->
    <vue-particles
        class="login-bg"
      color="#39AFFD"
      :particleOpacity="0.7"
      :particlesNumber="200"
      shapeType="circle"
      :particleSize="4"
      linesColor="#8DD1FE"
      :linesWidth="2"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      >
      </vue-particles>
    <div class='login'>
        <div class='login_title'>
            <span>管理员登录</span>
        </div>
        <div class='login_fields'>
            <div class='login_fields__user'>
                <div class='icon'>
                    <img alt="" src='assets/user_icon_copy.png' />
                </div>
                <input name="login" placeholder='用户名' v-model="loginForm.username" maxlength="16" type='text' autocomplete="off" />
                <div class='validation'>
                    <img alt="" src='assets/tick.png' />
                </div>
            </div>
            <div class='login_fields__password'>
                <div class='icon'>
                    <img alt="" src='assets/lock_icon_copy.png' />
                </div>
                <input name="pwd" v-model="loginForm.password" placeholder='密码' maxlength="16" type='password' autocomplete="off" />
                <div class='validation'>
                    <img alt="" src='assets/tick.png' />
                </div>
            </div>
            <div class='login_fields__password'>
                <div class='icon'>
                    <img alt="" src='assets/key.png' />
                </div>
            </div>
            <div class='login_fields__submit'>
                <input type='button' value='登录' @click='login' />
            </div>
        </div>
          <div class='success'>
            <h2>欢迎回来</h2>
            <br>
            <button @click='loginto'>进入</button>
        </div>
    </div>
    <div class='authent'>
        <div class="loader" style="height: 44px;width: 44px;margin-left: 28px;">
            <div class="loader-inner ball-clip-rotate-multiple">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <p>认证中...</p>
    </div>
    <div class="router">
    <router-view></router-view>
    </div>

  </div>
</template>

<script>
import $ from 'jquery'
export default {
  data () {
    return {
        loginForm: {
        username: 'admin',
        password: '123456'
      },
      // 表单验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        username: [
          { required: true, message: '请输入登陆名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: '请输入登陆密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  name: 'App',
  methods: {
    login() {
      // console.log(1);
        // $('.login').hide();
        $('.login').addClass('test'); //倾斜特效
        setTimeout(function () {
                    $('.login').addClass('testtwo'); 
                }, 300);
        setTimeout(function () {
            $('.authent').show(); 
        }, 500);
        if (this.loginForm.username == 'admin'&& this.loginForm.password == '123456') {
          setTimeout(function () {
            $('.authent').hide(); 
            $('.login').removeClass('testtwo'); //平移特效
        }, 2000);
        setTimeout(function () {
            $('.login').removeClass('test');
            $('.login div').fadeOut(100);
            $('.success').fadeIn(1000);
            // $('.success').html(data.Text);
            // $('.authent').show(); 
        }, 2400);
        }
    },
    loginto() {
      $('.router').show();
    }
  }
  
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
#app .login {
  display: flex;
  left: 1%;
  margin-top: 20px;
}
body .login_fields {
  margin-top: 100px;
}
#app .success h2 {
  font-weight: 700;
  color: aqua;
  margin-left: 80px;
}
#app .success button {
  margin-top: 50px;
  margin-left: 70px;
  display: inline-block;
  width: 100px;
  height: 70px;
  font-size: 40px;
  color: cornflowerblue;
  background: transparent;
  border: none;
}
#app .router {
  display: none;
  width: 1000px;
  height: 600px;
  background-image: url(./assets/bg_1.jpg);
  position: absolute;
  color: white;
  left: 50%;
  top: 40%;
  transform: translate(-50%,-50%);
}
</style>
